{% extends 'layout.html' %}
{% block main %}
    <script type=text/javascript>
        $(function() {
            {#            console.log($("aside"));#}
            if($("aside").text()==''){
            {#                console.log('in');#}
                $("article").removeClass('ym-g80 ym-gr');
            {#                $("article>div").removeClass('ym-gbox-right');#}
            }

        });
    </script>


    <div id="main">
        <div class="ym-wrapper">
            <div class="ym-wbox">
                <section id="searchbar" class="box info">
                    <form id="searchform" action="{{ url_for('searchport') }}"  method="post">

                        <label for="searchstr">模糊查询</label>
                        <input class="" name="searchstr" value="{{ searchstr or '' }}" />

                        <button id="searchbutton" type="submit" class="ym-button">查询</button>
                        模糊查询至少输入2个字母以上，否则只显示50条结果

                    </form>
                </section>
                {% if not (searchstr or lineid or countryid) %}
                    <p></p>
                    <section class="box info">
                        <div class="ym-grid">
                            <h4>常用港口 - 按目的港运价数量排列</h4>
                            <ul class="hlist-custom">
                                {% for mostport in mostports %}
                                    <li><a href="{{ url_for('sea',unloadportid=mostport.PortID,unloadport=mostport.PortNameEn) }}" title="{{ mostport.PortName }}">{{ mostport.PortNameEn }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </section>
                {% else %}

                    <section class="ym-grid linearize-level-1">
                        {% if lineid or countryid %}
                            <aside class="ym-g20 ym-gl">
                                <div class="ym-gbox-left ym-clearfix">
                                    <nav class="ym-vlist">
                                        {% if lineid %}
                                            <h6 class="ym-vtitle">航线列表</h6>
                                            <ul>
                                                {% for line in lines %}
                                                    {% if lineid==line.LineID %}
                                                        <li class="active"><strong>{{ line.LineName }}({{ line.PortsCount }})</strong></li>
                                                    {% else %}
                                                        <li><a href="{{ url_for('searchport',lineid=line.LineID) }}">{{ line.LineName }}({{ line.PortsCount }})</a></li>
                                                    {% endif %}
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                        {% if countryid %}
                                            <h6 class="ym-vtitle">国家列表</h6>
                                            <ul>
                                                {% for country in countrys %}
                                                    {% if countryid==country.CountryID %}
                                                        <li class="active"><strong>{{ country.CountryName }}({{ country.PortsCount }})</strong></li>
                                                    {% else %}
                                                        <li><a href="{{ url_for('searchport',countryid=country.CountryID) }}">{{ country.CountryName }}({{ country.PortsCount }})</a></li>
                                                    {% endif %}
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    </nav>
                                </div>
                            </aside>
                        {% endif %}
                        <article class="ym-g80 ym-gr content">
                            <div class="ym-clearfix">
                                <section id="searchcontent" class="ym-grid linearize-level-1">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th>港口</th>
                                            <th>港口英文名</th>
                                            <th>五字代码</th>
                                            <th>国家</th>
                                            <th>国家英文名</th>
                                            <th>代码</th>
                                            <th>航线</th>

                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for port in ports %}
                                            <tr>
                                                <td>{{ port.PortName }}</td>
                                                <td><a href="{{ url_for('sea',unloadportid=port.PortID,unloadport=port.PortNameEn) }}">{{ port.PortNameEn }}</a></td>
                                                <td>{{ port.Port5Code }}</td>
                                                <td><a href="{{ url_for('searchport',countryid=port.CountryID) }}">{{ port.CountryName }}</a></td>
                                                <td>{{ port.CountryNameEn or '' }}</td>
                                                <td>{{ port.Country2Code or '' }}</td>
                                                <td><a href="{{ url_for('searchport',lineid=port.LineID) }}">{{ port.LineName or '' }}</a></td>

                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </section>
                            </div>
                        </article>
                    </section>
                {% endif %}
            </div>
        </div>
    </div>

{% endblock main %}